<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="" />
  <title></title>

  <!-- ========== Css Files ========== -->
  <link href="css/root.css" rel="stylesheet">

  </head>
  <body>
  <!-- Start Page Loading -->
  <div class="loading"><img src="img/loading.gif" alt="loading-img"></div>
  <!-- End Page Loading -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
  <!-- START TOP -->
  <div id="top" class="clearfix">

    <!-- Start App Logo -->
    <div class="applogo">
      <a href="index.html" class="logo">Modern</a>
    </div>
    <!-- End App Logo -->
    
     <!-- Start Sidebar Show Hide Button -->
    <a href="#" class="sidebar-open-button"><i class="fa fa-bars"></i></a>
    <a href="#" class="sidebar-open-button-mobile"><i class="fa fa-bars"></i></a>
    <!-- End Sidebar Show Hide Button -->
    
   

   
    
    

   
    
     


    <!-- Start Sidepanel Show-Hide Button -->
    <a href="#sidepanel" class="sidepanel-open-button"><i class="fa fa-th-large"></i></a>
    <!-- End Sidepanel Show-Hide Button -->
<!-- Start Searchbox -->
    <form class="searchform">
      <input type="text" class="searchbox" id="searchbox" placeholder="Search">
      <span class="searchbutton"><i class="fa fa-search"></i></span>
    </form>
    <!-- End Searchbox -->
    <!-- Start Top Right -->
    <ul class="top-right">
 
    <li class="dropdown link">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle hdbutton">Add New <span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-list">
          <li><a href="#"><i class="fa falist fa-suitcase"></i>Product</a></li>
          <li><a href="#"><i class="fa falist fa-comments-o"></i>Blog Post</a></li>
          <li><a href="#"><i class="fa falist fa-image"></i>Image Gallery</a></li>
          <li><a href="#"><i class="fa falist fa-video-camera"></i>Video Gallery</a></li>
        </ul>
    </li>

    <li class="link">
      <a href="#" class="notifications">6</a>
    </li>
<li class="dropdown link">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle profilebox"><img src="img/profileimg.png" alt="img"><b>John Doe</b><span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-list dropdown-menu-right">
          <li role="presentation" class="dropdown-header">Profile</li>
          <li><a href="#"><i class="fa falist fa-inbox"></i>Inbox<span class="badge label-danger">4</span></a></li>
          <li><a href="#"><i class="fa falist fa-file-o"></i>Files</a></li>
          <li><a href="#"><i class="fa falist fa-wrench"></i>Settings</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa falist fa-lock"></i> Lockscreen</a></li>
          <li><a href="#"><i class="fa falist fa-power-off"></i> Logout</a></li>
        </ul>
    </li>
    

    </ul>
    <!-- End Top Right -->

  </div>
  <!-- END TOP -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 


<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START SIDEBAR -->
<div class="sidebar clearfix">

<ul class="sidebar-panel nav">
  <li><a href="index.html"><span class="icon color5"><i class="fa fa-home"></i></span>Dashboard<span class="label label-red">2</span></a></li>
  <li><a href="mailbox.html"><span class="icon color6"><i class="fa fa-envelope-o"></i></span>Email<span class="label label-default">23</span></a></li>
  <li><a href="#"><span class="icon color7"><i class="fa fa-flask"></i></span>UI Elements<span class="caret"></span></a>
    <ul>
      <li><a href="icons.html">Icons</a></li>
      <li><a href="tabs.html">Tabs</a></li>
      <li><a href="buttons.html">Buttons</a></li>
      <li><a href="panels.html">Panels</a></li>
      <li><a href="notifications.html">Notifications<span class="label label-danger">NEW</span></a></li>
      <li><a href="modal-boxes.html">Modal Boxes</a></li>
      <li><a href="progress-bars.html">Progress Bars</a></li>
      <li><a href="others.html">Others</a></li>
    </ul>
  </li>
  <li><a href="charts.html"><span class="icon color8"><i class="fa fa-bar-chart"></i></span>Charts</a></li>
  <li><a href="#"><span class="icon color9"><i class="fa fa-th"></i></span>Tables<span class="caret"></span></a>
    <ul>
      <li><a href="basic-table.html">Basic Tables</a></li>
      <li><a href="data-table.html">Data Tables</a></li>
    </ul>
  </li>
  <li><a href="#"><span class="icon color10"><i class="fa fa-check-square-o"></i></span>Forms<span class="caret"></span></a>
    <ul>
      <li><a href="form-elements.html">Form Elements</a></li>
      <li><a href="layouts.html">Form Layouts</a></li>
      <li><a href="text-editors.html">Text Editors</a></li>
    </ul>
  </li>
  <li><a href="widgets.html"><span class="icon color11"><i class="fa fa-diamond"></i></span>Widgets<span class="label label-blue">7</span></a></li>
  <li><a href="calendar.html"><span class="icon color8"><i class="fa fa-calendar-o"></i></span>Calendar<span class="label label-danger">NEW</span></a></li>

  <li><a href="#"><span class="icon color14"><i class="fa fa-paper-plane-o"></i></span>Pages<span class="caret"></span></a>
    <ul>
      <li><a href="social-profile.html">Social Profile</a></li>
      <li><a href="invoice.html">Invoice<span class="label label-danger">NEW</span></a></li>
      <li><a href="login.html">Login Page</a></li>
      <li><a href="register.html">Register</a></li>
      <li><a href="forgot-password.html">Forgot Password</a></li>
      <li><a href="lockscreen.html">Lockscreen</a></li>
      <li><a href="blank.html">Blank Page</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="404.html">404 Page</a></li>
      <li><a href="500.html">500 Page</a></li>
    </ul>
  </li>
    <li><a href="typography.html"><span class="icon color12"><i class="fa fa-font"></i></span>Typography</a></li>
  <li><a href="grid.html"><span class="icon color15"><i class="fa fa-columns"></i></span>Grid</a></li>
  <li><a href="customizable.html"><span class="icon color10"><i class="fa fa-lightbulb-o"></i></span>Customizable</a></li>
  <li><a href="helper-classes.html"><span class="icon color8"><i class="fa fa-code"></i></span>Helper Classes</a></li>
</ul>
<div class="sidebar-plan">
  Bandwidth<a href="#" class="link">60%</a>
  <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>
</div>

</div>


</div>
<!-- END SIDEBAR -->
<!-- //////////////////////////////////////////////////////////////////////////// --> 

 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTENT -->
<div class="content">

  <!-- Start Page header -->
  <div class="page-header">
  <h1 class="title">Notifications</h1>
    <ol class="breadcrumb">
        <li><a href="index.html">Dashboard</a></li>
        <li><a href="#">UI Elements</a></li>
        <li class="active">Notifications</li>
      </ol>

   
  </div>
  <!-- End Page header -->

 

 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding container-widget">



  <!-- Start Row -->
  <div class="row">

   <div class="col-md-12 padding-b-20">
    <h4 class="font-title">Sweet Alert</h4>
    <p>Beautiful Replacement for Javascript's "Alert". SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
  </div>

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          A basic message
        </div>

        <div class="panel-body">
          <a id="button1" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/basic.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button1').onclick = function(){
              swal("Here's a message!");
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Title with a text under
        </div>

        <div class="panel-body">
          <a id="button2" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/textunder.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button2').onclick = function(){
              swal("Here's a message!", "It's pretty, isn't it?")
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Success Message
        </div>

        <div class="panel-body">
          <a id="button3" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/success.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button3').onclick = function(){
              swal("Good job!", "You clicked the button!", "success")
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Message with auto close timer
        </div>

        <div class="panel-body">
          <a id="button4" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/autotime.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button4').onclick = function(){
              swal({   title: "Auto close alert!",   text: "I will close in 3 seconds.",   timer: 3000 });
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Warning message
        </div>

        <div class="panel-body">
          <a id="button5" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/warning.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button5').onclick = function(){
              swal({
                title: "Are you sure?", 
                text: "You will not be able to recover this imaginary file!", 
                type: "warning", 
                showCancelButton: true, 
                confirmButtonColor: "#DD6B55", 
                confirmButtonText: "Yes, delete it!", 
                closeOnConfirm: false 
              },
              function(){
                  swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
              });
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Another Warning message
        </div>

        <div class="panel-body">
          <a id="button6" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/anotherwarning.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button6').onclick = function(){
              swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel plx!",
                closeOnConfirm: false,
                closeOnCancel: false
              },
              function(isConfirm){
                if (isConfirm) {
                  swal("Deleted!", "Your imaginary file has been deleted.", "success");
                } else {
                  swal("Cancelled", "Your imaginary file is safe :)", "error");
                }
              });
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->

    <!-- Start Panel -->
    <div class="col-lg-3 col-md-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Message with Custom Image
        </div>

        <div class="panel-body">
          <a id="button7" href="#" class="modalicon" data-toggle="modal" data-target="#myModal">
              <img src="img/alerticons/picture.png" alt="img" style="width:50%;">
          </a>
          <script>
            document.querySelector('#button7').onclick = function(){
              swal({
                title: "Friend Accepted",
                text: "Jonathan Doe added your friend list !",
                imageUrl: "img/profileimg.png"
              });
            };
          </script>
        </div>

      </div>
    </div>
    <!-- End Panel -->




  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">

   <div class="col-md-12 padding-b-20">
    <h4 class="font-title"><b>Modern</b> Alert and Notifications </h4>
    <p>We coded awesome alert for who buy Modern.</p>
  </div>



    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Basic
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert alert1">
            <a href="#" class="closed">&times;</a>
            You have a mail.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert2">
            <a href="#" class="closed">&times;</a>
            This is another Modern-alert.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert3">
            <a href="#" class="closed">&times;</a>
            Woahhh. This is going to be real.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert4">
            <a href="#" class="closed">&times;</a>
            Get a drink. This is important message.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert5">
            <a href="#" class="closed">&times;</a>
            Warning Message. You know what i mean.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert6">
            <a href="#" class="closed">&times;</a>
            Danger fellas. We are under attack !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert7">
            <a href="#" class="closed">&times;</a>
            Fabulous everytime !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert8">
            <a href="#" class="closed">&times;</a>
            It's so fluffy...
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert9">
            <a href="#" class="closed">&times;</a>
            Pinky pinky pinky !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert10">
            <a href="#" class="closed">&times;</a>
            File sent to John Doe !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert alert11">
            <a href="#" class="closed">&times;</a>
            I like trains
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->



    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          With Icon
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert1">
            <i class="fa fa-envelope-o"></i>
            <a href="#" class="closed">&times;</a>
            You have a mail.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert2">
            <i class="fa fa-car"></i>
            <a href="#" class="closed">&times;</a>
            This is another Modern-alert.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert3">
            <i class="fa fa-check"></i>
            <a href="#" class="closed">&times;</a>
            Woahhh. This is going to be real.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert4">
            <i class="fa fa-info"></i>
            <a href="#" class="closed">&times;</a>
            Get a drink. This is important message.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert5">
            <i class="fa fa-warning"></i>
            <a href="#" class="closed">&times;</a>
            Warning Message. You know what i mean.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert6">
            <i class="fa fa-lock"></i>
            <a href="#" class="closed">&times;</a>
            Danger fellas. We are under attack !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert7">
            <i class="fa fa-map-marker"></i>
            <a href="#" class="closed">&times;</a>
            Fabulous everytime !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert8">
            <i class="fa fa-signal"></i>
            <a href="#" class="closed">&times;</a>
            It's so fluffy...
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert9">
            <i class="fa fa-line-chart"></i>
            <a href="#" class="closed">&times;</a>
            Pinky pinky pinky !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert10">
            <i class="fa fa-file-o"></i>
            <a href="#" class="closed">&times;</a>
            File sent to John Doe !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert11">
            <i class="fa fa-train"></i>
            <a href="#" class="closed">&times;</a>
            I like trains
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->



    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Click to Close
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert1">
            <i class="fa fa-envelope-o"></i>
            You have a mail.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert2">
            <i class="fa fa-car"></i>
            This is another Modern-alert.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert3">
            <i class="fa fa-check"></i>
            Woahhh. This is going to be real.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert4">
            <i class="fa fa-info"></i>
            Get a drink. This is important message.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert5">
            <i class="fa fa-warning"></i>
            Warning Message. You know what i mean.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert6">
            <i class="fa fa-lock"></i>
            Danger fellas. We are under attack !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert7">
            <i class="fa fa-map-marker"></i>
            Fabulous everytime !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert8">
            <i class="fa fa-signal"></i>
            It's so fluffy...
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert9">
            <i class="fa fa-line-chart"></i>
            Pinky pinky pinky !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert10">
            <i class="fa fa-file-o"></i>
            File sent to John Doe !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon Modern-alert-click alert11">
            <i class="fa fa-train"></i>
            I like trains
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Lighten
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert1-light">
            <i class="fa fa-envelope-o"></i>
            <a href="#" class="closed">&times;</a>
            You have a mail.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert2-light">
            <i class="fa fa-car"></i>
            <a href="#" class="closed">&times;</a>
            This is another Modern-alert.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert3-light">
            <i class="fa fa-check"></i>
            <a href="#" class="closed">&times;</a>
            Woahhh. This is going to be real.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert4-light">
            <i class="fa fa-info"></i>
            <a href="#" class="closed">&times;</a>
            Get a drink. This is important message.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert5-light">
            <i class="fa fa-warning"></i>
            <a href="#" class="closed">&times;</a>
            Warning Message. You know what i mean.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert6-light">
            <i class="fa fa-lock"></i>
            <a href="#" class="closed">&times;</a>
            Danger fellas. We are under attack !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert7-light">
            <i class="fa fa-map-marker"></i>
            <a href="#" class="closed">&times;</a>
            Fabulous everytime !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert8-light">
            <i class="fa fa-signal"></i>
            <a href="#" class="closed">&times;</a>
            It's so fluffy...
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert9-light">
            <i class="fa fa-line-chart"></i>
            <a href="#" class="closed">&times;</a>
            Pinky pinky pinky !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert10-light">
            <i class="fa fa-file-o"></i>
            <a href="#" class="closed">&times;</a>
            File sent to John Doe !
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert11-light">
            <i class="fa fa-train"></i>
            <a href="#" class="closed">&times;</a>
            I like trains
          </div>
          <!-- End an Alert -->


        </div>

      </div>
    </div>
    <!-- End Panel -->



  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          With Image
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-img alert1">
            <img src="img/profileimg.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <b>John Doe</b> type a message for you.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-img alert10">
            <img src="img/profileimg2.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <b>John</b> wanna be your friend <br><a href="#">See Profile</a>
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-img alert6">
            <img src="img/profileimg5.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <b>John</b> wanna be your friend <br><a href="#">See Profile</a>
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          With Title
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert alert1">
            <a href="#" class="closed">&times;</a>
            <h4>You have a Message!</h4>
            <b>John Doe</b> sent you a message.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-img alert3">
            <img src="img/profileimg.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <h4>You have a Message!</h4>
            <b>John Doe</b> sent you a message.
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-icon alert2">
            <i class="fa fa-envelope-o"></i>
            <a href="#" class="closed">&times;</a>
            <h4>You have a Message!</h4>
            <b>John Doe</b> sent you a message.
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-4">
      <div class="panel panel-transparent">

        <div class="panel-title">
          With Buttons
        </div>

        <div class="panel-body">

          <!-- Start an Alert -->
          <div class="Modern-alert alert9">
            <a href="#" class="closed">&times;</a>
            <h4>Friend Request</h4>
            <p><b>John Doe</b> sent you a request.</p>
            <button class="primary">Accept</button>
            <button class="cancel">Decline</button>
          </div>
          <!-- End an Alert -->

          <!-- Start an Alert -->
          <div class="Modern-alert Modern-alert-img alert6">
            <img src="img/profileimg.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <h4>You have a Message!</h4>
            <p><b>John Doe</b> sent you a message.</p>
            <button class="primary">Accept</button>
            <button class="cancel">Decline</button>
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">


   <div class="col-md-12 padding-b-20">
    <h4 class="font-title">Screen Position </h4>
    <p>Modern Alert also support screen position. It's easy to use.</p>
  </div>

    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Top
        </div>

        <div class="panel-body">
          <!-- Trigger -->
          <button id="showtop" class="btn btn-default">Show Top</button>

          <!-- Start an Alert -->
          <div id="alerttop" class="Modern-alert Modern-alert-icon Modern-alert-click alert6 Modern-alert-top">
            <i class="fa fa-user"></i>
            This is an example top alert. You can edit what u wish. <a href="#">Click anywhere to close</a>
          </div>
          <!-- End an Alert -->
        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Bottom
        </div>

        <div class="panel-body">

          <!-- Trigger -->
          <button id="showbottom" class="btn btn-default">Show Bottom</button>

          <!-- Start an Alert -->
          <div id="alertbottom" class="Modern-alert Modern-alert-icon Modern-alert-click alert3 Modern-alert-bottom">
            <i class="fa fa-user"></i>
            As you see i'm at bottom my friend <a href="#">Click anywhere to close</a>
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Top Left
        </div>

        <div class="panel-body">

          <!-- Trigger -->
          <button id="showtopleft" class="btn btn-default">Show Top Left</button>

          <!-- Start an Alert -->
          <div id="alerttopleft" class="Modern-alert alert3 Modern-alert-top-left">
            <a href="#" class="closed">&times;</a>
            <h4>Hello Again</h4>
            Yes this is the top left alert.
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-6 col-lg-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Top Right
        </div>

        <div class="panel-body">

          <!-- Trigger -->
          <button id="showtopright" class="btn btn-default">Show Top Right</button>

          <!-- Start an Alert -->
          <div id="alerttopright" class="Modern-alert Modern-alert-img alert7 Modern-alert-top-right">
            <img src="img/profileimg.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <h4>You have a Message!</h4>
            <b>John Doe</b> sent you a message.
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->


  </div>
  <!-- End Row -->



  <!-- Start Row -->
  <div class="row">


    <!-- Start Panel -->
    <div class="col-md-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Bottom Left
        </div>

        <div class="panel-body">
          <!-- Trigger -->
          <button id="showbottomleft" class="btn btn-default">Show Bottom Left</button>

          <!-- Start an Alert -->
          <div id="alertbottomleft" class="Modern-alert Modern-alert-icon Modern-alert-click alert6 Modern-alert-bottom-left">
            <i class="fa fa-user"></i>
            John became a pro member.
          </div>
          <!-- End an Alert -->
        </div>

      </div>
    </div>
    <!-- End Panel -->


    <!-- Start Panel -->
    <div class="col-md-3">
      <div class="panel panel-transparent">

        <div class="panel-title">
          Bottom Right
        </div>

        <div class="panel-body">

          <!-- Trigger -->
          <button id="showbottomright" class="btn btn-default">Show Bottom Right</button>

          <!-- Start an Alert -->
          <div id="alertbottomright" class="Modern-alert Modern-alert-img alert3 Modern-alert-bottom-right">
            <img src="img/profileimg.png" class="img" alt="img">
            <a href="#" class="closed">&times;</a>
            <h4>Jonathan Doe is oline</h4>
            <a href="#">Send a Message</a>
          </div>
          <!-- End an Alert -->

        </div>

      </div>
    </div>
    <!-- End Panel -->



  </div>
  <!-- End Row -->









</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- Start Footer -->
<div class="row footer">
  <div class="col-md-6 text-left">
  Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.aspku.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
  </div>
  <div class="col-md-6 text-right">
    
  </div> 
</div>
<!-- End Footer -->



</div>
<!-- End Content -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 

<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START SIDEPANEL -->
<div role="tabpanel" class="sidepanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#today" aria-controls="today" role="tab" data-toggle="tab">TODAY</a></li>
    <li role="presentation"><a href="#tasks" aria-controls="tasks" role="tab" data-toggle="tab">TASKS</a></li>
    <li role="presentation"><a href="#chat" aria-controls="chat" role="tab" data-toggle="tab">CHAT</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">

    <!-- Start Today -->
    <div role="tabpanel" class="tab-pane active" id="today">

      <div class="sidepanel-m-title">
        Today
        <span class="left-icon"><a href="#"><i class="fa fa-refresh"></i></a></span>
        <span class="right-icon"><a href="#"><i class="fa fa-file-o"></i></a></span>
      </div>

      <div class="gn-title">NEW</div>

      <ul class="list-w-title">
        <li>
          <a href="#">
            <span class="label label-danger">ORDER</span>
            <span class="date">9 hours ago</span>
            <h4>New Jacket 2.0</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
        <li>
          <a href="#">
            <span class="label label-success">COMMENT</span>
            <span class="date">14 hours ago</span>
            <h4>Bill Jackson</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
        <li>
          <a href="#">
            <span class="label label-info">MEETING</span>
            <span class="date">at 2:30 PM</span>
            <h4>Developer Team</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
        <li>
          <a href="#">
            <span class="label label-warning">EVENT</span>
            <span class="date">3 days left</span>
            <h4>Birthday Party</h4>
            Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
          </a>
        </li>
      </ul>

    </div>
    <!-- End Today -->

    <!-- Start Tasks -->
    <div role="tabpanel" class="tab-pane" id="tasks">

      <div class="sidepanel-m-title">
        To-do List
        <span class="left-icon"><a href="#"><i class="fa fa-pencil"></i></a></span>
        <span class="right-icon"><a href="#"><i class="fa fa-trash"></i></a></span>
      </div>

      <div class="gn-title">TODAY</div>

      <ul class="todo-list">
        <li class="checkbox checkbox-primary">
          <input id="checkboxside1" type="checkbox"><label for="checkboxside1">Add new products</label>
        </li>
        
        <li class="checkbox checkbox-primary">
          <input id="checkboxside2" type="checkbox"><label for="checkboxside2"><b>May 12, 6:30 pm</b> Meeting with Team</label>
        </li>
        
        <li class="checkbox checkbox-warning">
          <input id="checkboxside3" type="checkbox"><label for="checkboxside3">Design Facebook page</label>
        </li>
        
        <li class="checkbox checkbox-info">
          <input id="checkboxside4" type="checkbox"><label for="checkboxside4">Send Invoice to customers</label>
        </li>
        
        <li class="checkbox checkbox-danger">
          <input id="checkboxside5" type="checkbox"><label for="checkboxside5">Meeting with developer team</label>
        </li>
      </ul>

      <div class="gn-title">TOMORROW</div>
      <ul class="todo-list">
        <li class="checkbox checkbox-warning">
          <input id="checkboxside6" type="checkbox"><label for="checkboxside6">Redesign our company blog</label>
        </li>
        
        <li class="checkbox checkbox-success">
          <input id="checkboxside7" type="checkbox"><label for="checkboxside7">Finish client work</label>
        </li>
        
        <li class="checkbox checkbox-info">
          <input id="checkboxside8" type="checkbox"><label for="checkboxside8">Call Johnny from Developer Team</label>
        </li>

      </ul>
    </div>    
    <!-- End Tasks -->

    <!-- Start Chat -->
    <div role="tabpanel" class="tab-pane" id="chat">

      <div class="sidepanel-m-title">
        Friend List
        <span class="left-icon"><a href="#"><i class="fa fa-pencil"></i></a></span>
        <span class="right-icon"><a href="#"><i class="fa fa-trash"></i></a></span>
      </div>

      <div class="gn-title">ONLINE MEMBERS (3)</div>
      <ul class="group">
        <li class="member"><a href="#"><img src="img/profileimg.png" alt="img"><b>Allice Mingham</b>Los Angeles</a><span class="status online"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg2.png" alt="img"><b>James Throwing</b>Las Vegas</a><span class="status busy"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg3.png" alt="img"><b>Fred Stonefield</b>New York</a><span class="status away"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg4.png" alt="img"><b>Chris M. Johnson</b>California</a><span class="status online"></span></li>
      </ul>

      <div class="gn-title">OFFLINE MEMBERS (8)</div>
     <ul class="group">
        <li class="member"><a href="#"><img src="img/profileimg5.png" alt="img"><b>Allice Mingham</b>Los Angeles</a><span class="status offline"></span></li>
        <li class="member"><a href="#"><img src="img/profileimg6.png" alt="img"><b>James Throwing</b>Las Vegas</a><span class="status offline"></span></li>
      </ul>

      <form class="search">
        <input type="text" class="form-control" placeholder="Search a Friend...">
      </form>
    </div>
    <!-- End Chat -->

  </div>

</div>
<!-- END SIDEPANEL -->
<!-- //////////////////////////////////////////////////////////////////////////// --> 



<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="js/plugins.js"></script>

<!-- ================================================
Sweet Alert
================================================ -->
<script src="js/sweet-alert/sweet-alert.min.js"></script>

<!-- ================================================
Modern Alert
================================================ -->
<script src="js/Modern-alert/main.js"></script>



</body>
</html>